body {
    padding-top: 2%;
    padding-left: 5%;
    padding-right: 5%;
    padding-bottom: 2%;
    font-family: 'IBM Plex Sans', Arial, Helvetica, sans-serif;

    /* This colour is taken from the VS Code welcome page, but doesn't appear to be available in other webviews. */
    --welcomePage-tileBackground: #171717;
}

body.vscode-light {
    /* In the default light themes, the welcome page colour appears to match the sidebar colour. */
    --welcomePage-tileBackground: var(--vscode-sideBar-background);
}

#top-section {
    width: 100%;
    display: inline-flex;
    align-items: flex-start;
    padding-bottom: 2em;
}

.title-section {
    display: inline-flex;
    align-items: center;
}

.title-section-subtitled {
    align-items: flex-start;
}

#logo-container {
    padding-top: 0.75em;
    width: 4em;
    margin-right: 1.25em;
}

#title {
    font-size: 2em;
    min-width: max-content;
}

#subtitle {
    color: var(--vscode-editorLineNumber-foreground);
    font-size: 1.5em;
}

#learn-more-btn {
    align-self: center;
    padding-right: 0;
    margin-left: auto;
}

.fixed-table {
    table-layout: fixed;
}

tr {
    padding-bottom: 0.5em;
}

.btn, button {
    font-weight: 400;
}

.btn {
    min-width: max-content;
    padding-top: 0.6em;
    padding-bottom: 0.6em;
    padding-left: 1.5em;
    padding-right: 1.5em;

    font-size: 110%;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn > img, .btn > input[type="image"] {
    height: 1.5em;
    padding-left: 1em;
    margin-left: auto;
}

.btn-prominent {
    min-width: 15ch;
    color: var(--vscode-button-foreground);
    background-color: var(--vscode-button-background);
    border: 1px solid var(--vscode-button-background);
}

.btn-background {
    color: var(--vscode-sideBar-foreground);
    background-color: var(--vscode-sideBar-background);
    border: 1px solid var(--vscode-sideBar-background);
}

a {
    text-decoration: none;
}

.btn:hover, a:hover, .clickable:hover {
    text-decoration: underline;
    cursor: pointer;
}

.btn:focus, a:focus, input[type="checkbox"]:focus:not(.not-allowed), input[type="image"]:focus:not(.not-allowed), .clickable:focus {
    text-decoration: underline;
    cursor: pointer;
    outline: var(--vscode-button-background) solid 1px;
}

.btn-disabled {
    --disabled-btn-color: #444;
    background: var(--disabled-btn-color);
    border: 1px solid var(--disabled-btn-color);
}

.btn-disabled:hover, .not-allowed:hover {
    text-decoration: none;
    cursor: not-allowed;
}

.btn-disabled:focus, .not-allowed:focus {
    text-decoration: none;
    cursor: not-allowed;
    outline: var(--disabled-btn-color) solid 1px;
}

.btn-red {
    color: var(--vscode-button-foreground);
    background: darkred;
    border: 1px solid darkred;
}

img {
    /* Colour alt text to match */
    color: var(--vscode-editor-foreground)
}

input[type="checkbox"] {
    zoom: 1.25;
}

.tab-group {
    display: inline-flex;
    margin-top: 1em;
    margin-bottom: 1.5em;
}

.tab-btn {
    min-width: 15ch;
    margin-right: 0.25em;
    padding-left: 0.5em;
    padding-bottom: 0.5em;
    border-bottom: 2px solid var(--vscode-activityBar-background);
}

.tab-btn:focus {
    /* Override from .btn */
    outline: none;
}

.tab-btn.selected {
    font-weight: bold;
    border-bottom: 2px solid var(--vscode-button-background)
}

.tab-btn img {
    margin-right: .5em;
    height: 1.5em;
    vertical-align: text-top;
}

#copy-btn-tooltip {
    color: #000;
    background-color: #ddd;
    border: 1px solid #444;
    padding: 0.2em;
    padding-left: 0.5em;
    padding-right: 0.5em;
}

.warning-banner {
    background-color: #fc0b;
    color: #222;

    padding: 0.5em;
    padding-left: 2em;
    padding-right: 2em;
    margin-bottom: 1em;

    /* fill banner container horizontally */
    flex: 1;

    display: flex;
    align-items: center;
}

.warning-banner img {
    padding-right: 1em;
    height: 2.5em;
}

.transparent {
    opacity: 0.75;
}
